import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { getSign } from '../ossUpload/service'
import { message } from 'antd'
import { request } from 'umi'
import { useRef, useMemo } from 'react'
import './editor.css'

export function QuillEditor(props: { value?: string; onChange?: (val: string) => void }) {
    const { value, onChange } = props;
    const refs: any = useRef(null);
    const toolbar = useMemo(() => ({
        toolbar: {
            container: [
                [{ 'size': ['small', false, 'large', 'huge'] }], // 字体设置
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题字号，不能设置单个字大小
                ['bold', 'italic', 'strike', 'underline'], // 加粗，斜体，下划线，删除线
                ['blockquote', 'code-block'], // 引用，代码块
                [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
                ['link', 'image'], // a链接和图片的显示
                [{ 'align': [] }], // 对齐方式
                [{
                    'background': ['rgb(  0,   0,   0)', 'rgb(230,   0,   0)', 'rgb(255, 153,   0)',
                        'rgb(255, 255,   0)', 'rgb(  0, 138,   0)', 'rgb(  0, 102, 204)',
                        'rgb(153,  51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)',
                        'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)',
                        'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)',
                        'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)',
                        'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)',
                        'rgb(136, 136, 136)', 'rgb(161,   0,   0)', 'rgb(178, 107,   0)',
                        'rgb(178, 178,   0)', 'rgb(  0,  97,   0)', 'rgb(  0,  71, 178)',
                        'rgb(107,  36, 178)', 'rgb( 68,  68,  68)', 'rgb( 92,   0,   0)',
                        'rgb(102,  61,   0)', 'rgb(102, 102,   0)', 'rgb(  0,  55,   0)',
                        'rgb(  0,  41, 102)', 'rgb( 61,  20,  10)']
                }],
                [{
                    'color': ['rgb(  0,   0,   0)', 'rgb(230,   0,   0)', 'rgb(255, 153,   0)',
                        'rgb(255, 255,   0)', 'rgb(  0, 138,   0)', 'rgb(  0, 102, 204)',
                        'rgb(153,  51, 255)', 'rgb(255, 255, 255)', 'rgb(250, 204, 204)',
                        'rgb(255, 235, 204)', 'rgb(255, 255, 204)', 'rgb(204, 232, 204)',
                        'rgb(204, 224, 245)', 'rgb(235, 214, 255)', 'rgb(187, 187, 187)',
                        'rgb(240, 102, 102)', 'rgb(255, 194, 102)', 'rgb(255, 255, 102)',
                        'rgb(102, 185, 102)', 'rgb(102, 163, 224)', 'rgb(194, 133, 255)',
                        'rgb(136, 136, 136)', 'rgb(161,   0,   0)', 'rgb(178, 107,   0)',
                        'rgb(178, 178,   0)', 'rgb(  0,  97,   0)', 'rgb(  0,  71, 178)',
                        'rgb(107,  36, 178)', 'rgb( 68,  68,  68)', 'rgb( 92,   0,   0)',
                        'rgb(102,  61,   0)', 'rgb(102, 102,   0)', 'rgb(  0,  55,   0)',
                        'rgb(  0,  41, 102)', 'rgb( 61,  20,  10)']
                }],
                ['clean'], //清空
            ],
            handlers: {
                'image': () => {
                    const input: any = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
                    input.click();
                    input.onchange = async () => {

                        const response = await getSign({});
                        const file = input.files[0];
                        const formData = new FormData();
                        const key = (response.dir + response.fileName + file.name).replace(/\s*/g, "")
                        formData.append('policy', response.policy);
                        formData.append('signature', response.signature);
                        formData.append('ossaccessKeyId', response.accessId);
                        formData.append('dir', response.dir);
                        formData.append('host', response.host);
                        formData.append('key', key);
                        formData.append('signature', response.signature);
                        formData.append('file', file);
                        const url = response.host + "/" + key
                        const hide = message.loading('上传中...', 0);
                        try {
                            await request(response.host, {
                                method: 'POST',
                                data: formData,
                            })
                            // console.log('上传结果', res);
                            const quill = refs?.current?.getEditor(); // 获取到编辑器本身

                            const cursorPosition = quill?.getSelection().index; // 获取当前光标位置
                            quill?.insertEmbed(cursorPosition, 'image', url); // 插入图片
                            quill?.setSelection(cursorPosition + 1); // 光标位置加1
                            hide();
                        } catch (error) {
                            console.log(error);

                            hide();
                            message.error('上传失败')
                        }
                    }

                }, // 点击图片标志会调用的方法
                'video2': () => { },
            },
        },

    }), [])

    return <ReactQuill theme="snow" ref={refs} modules={toolbar} value={value} onChange={onChange} />;
}